<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="logo">用户管理系统</div>
      <div class="user-info">
        <span class="welcome">欢迎, {{ userInfo.nickname || userInfo.username }}</span>
        <el-button
            type="text"
            icon="el-icon-switch-button"
            @click="logout"
            class="logout-btn"
        >
          退出登录
        </el-button>
      </div>
    </el-header>

    <!-- 主内容区 -->
    <el-main class="main-content">
      <UserList />
    </el-main>
  </div>
</template>

<script>
import UserList from '../components/UserList.vue'

export default {
  name: 'Home',
  components: {
    UserList
  },
  data() {
    return {
      userInfo: {}
    }
  },
  created() {
    // 获取用户信息
    const userStr = localStorage.getItem('user')
    if (userStr) {
      this.userInfo = JSON.parse(userStr)
    } else {
      // 如果没有用户信息，跳转到登录页
      this.$router.push('/')
    }
  },
  methods: {
    logout() {
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除本地存储
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        this.$message.success('退出登录成功')
        this.$router.push('/')
      }).catch(() => {
        // 取消退出
      })
    }
  }
}
</script>

<style scoped>
.home-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.header {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  z-index: 10;
}

.logo {
  font-size: 18px;
  font-weight: 600;
  color: #1890ff;
}

.user-info {
  display: flex;
  align-items: center;
}

.welcome {
  margin-right: 20px;
  color: #666;
}

.logout-btn {
  color: #f56c6c;
  transition: all 0.3s;
}

.logout-btn:hover {
  background-color: rgba(245, 108, 108, 0.1);
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style>